<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
    <title>html5手机移动端转盘抽奖</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<script src="../js/tween.js" type="text/javascript" charset="utf-8"></script>
<body>
    <!--
    实现要求：
    1、有且仅有3次抽奖机会;
    2、开始抽奖，指针随机转5-10圈（每圈360deg，即转的度数为1800-3600之间任意数）;
    3、要求把抽奖次数记录下来，把页面关掉重新打开依然有效；
    -->
    <div class="box">
        <div class="turnplate">
            <div class="prize"></div>
            <div class="pointer" id="pointer"></div>
        </div>
    </div>
    <p style="cursor: pointer;">充值金币</p>
</body>
<script type="text/javascript">
	(function(){
		//摇一摇，摇到外婆桥
		//初始化考虑重力加速度的各个方向的值
		var x = 0;
		var y = 0;
		var z = 0;
		var lastX = 0;//摇晃事件，上一次的值
		var lastY = 0;
		var lastZ = 0;
		var maxSpeed = 3000;//摇晃激烈程度临界值
		var num = 0;//摇晃的次数
		var lastTime = 0;//上一次摇晃的时间
		if(window.DeviceMotionEvent){
			window.addEventListener("devicemotion",shakeFn,false)
		}else{
			
		}
		function shakeFn(event){
			//获取设备包含重力加速度的加速度值
			var ag =  event.accelerationIncludingGravity;
			//获取当前的毫秒数
			var curTime =new Date().getTime();
			//如果本次摇晃跟上次摇晃事件事件差值大于100毫秒，才算做下一次摇晃
			if((curTime - lastTime) > 100){
				var diffTime = curTime - lastTime;//两次摇晃时间差值
				//保存上一次摇晃的时间，
				lastTime = curTime;
				//各个方向的加速度值
				x = ag.x;
				y = ag.y;
				z = ag.z;
				var speed =Math.abs((x + y + z - lastX - lastY - lastZ)/diffTime*10000);//计算摇晃的激烈程度
				if(speed > maxSpeed){
					start();
					num++;
				}
				//保存上一次摇晃的速度。
				lastX = x;
				lastY = y;
				lastZ = z;
			}
		}
		
		//清零
		var reset = document.getElementsByTagName("p")[0];
		reset.onclick = function(){
			storage.setItem("count",0);
		}
		
		//获取或者设置本地存储（兼容IE8以下）
		var cookie = {
			getCookie:function(key){
				var cookie = document.cookie;
				var arr = cookie.split("; ");
				for (var i = 0;i <arr.length;i++) {
					var arr2 = arr[i].split("=");
					if(arr2[0] == key){
						return arr2[1];
					}
				}
			},
			setCookie:function(day,key,value){
				var nowDate = new Date()	;
				var time = nowDate.getDate();
				nowDate.setDate(time + day);
				document.cookie = key + "=" + value + "; expires=" + day;
			}
		}
		//本地存储(不兼容IE8以下)
		var storage = {
			getItem: function(key){
				return window.localStorage ? localStorage.getItem(key):cookie.getCookie("count");
			},
			setItem:function(key,val){
				if(window.localStorage){
					localStorage.setItem(key,val);
				}else{
					cookie.setCookie(5,key,val);
				}
			}
		}
		var pointer = document.getElementById("pointer");
		var curRotate = false;
		var isRotate = 0;
		//start后面不能加括号，如果加上括号，会不遵守点击事件，因为会一直调用了，
		pointer.onclick = start;
		pointer.ontouchstart = start;
		function start(){
			//加上一个锁，防止点击的时候再点击，会有影响
			if(curRotate){
				return;
			}
			var count = storage.getItem("count");
			if(count >= 3){
				alert("hahahaha");
				return;
			}
			count++;
			curRotate = true;
			storage.setItem("count",count);
			isRotate += suiji(5,10)*360;
			rotateFn(pointer,isRotate);
			var timer = setTimeout(function(){
				endFn();
				check(isRotate);
			},2000);
			function rotateFn(obj,num){
			obj.style.cssText = "-webkit-transform:translate(-50%,-50%) rotate(" + num + "deg);transform:translate(-50%,-50%) rotate(" + num + "deg)";
		}
			function endFn(){
				curRotate = false;	
			}
			function check(num){
				num = num % 360;
				if(num <= 18 && num >= 0){
					alert("30M免费流量")
				}else if(num > 18 && num <= 54){
					alert("100M免费流量");
				}else if(num > 54 && num <= 90){
					alert("2闪币");
				}else if(num > 90 && num <= 126){
					alert("50M免费流量");
				}else if(num > 126 && num <= 162){
					alert("10闪币");
				}else if(num > 162 && num <= 198){
					alert("谢谢参与");
				}else if(num > 198 && num <= 234){
					alert("5闪币");
				}else if(num > 234 && num <= 270){
					alert("10M免费流量");
				}else if(num > 270 && num <= 306){
					alert("20M免费流量");
				}else if(num > 306 && num <= 342){
					alert("20闪币");
				}else if(num > 342 && num <= 360){
					alert("30M免费流量");
				}
			}
		}
		function suiji(min,max){
			return Math.random()*(max - min) + min;
		}
	})();
</script>
</html>